<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="40%">
                <div style="height: 400px; margin-top: 20px;">
                    <img :src="getImageUrl(fileName)" alt="暂无图片" style="width: 100%; height: auto;">
                </div>
            </el-aside>
            <el-main style="height: 80vh; margin-left: 20px;">
                <div style="height: 45%;">
                    <div style="width: 30%; text-align: center; line-height: 60px; font-size: larger; font-weight: bolder; background-color: brown; color: white;">
                        预定信息
                    </div>
                    <div>
                        <div v-for="(value, key) in roomInfo" :key="key" style="margin-top: 30px; margin-bottom: 30px; font-weight: bold;">
                            {{ key }}: {{ value }}
                        </div>
                    </div>
                </div>
                <div style="height: 200px; margin-top: 40px;">
                    <div style="width: 30%; text-align: center; line-height: 60px; font-size: larger; font-weight: bolder; background-color: brown; color: white; margin-bottom: 40px;">
                        预定时间
                    </div>
                    <div style="height: 60%; display: flex; width: 80%; justify-content: space-between;">
                        <el-date-picker
                            clearable
                            v-model="orderDate.bookingTime"
                            type="datetime"
                            placeholder="选择开始日期时间"
                            format="YYYY-MM-DD HH:mm"
                            value-format="YYYY-MM-DDTHH:mm:ss"
                            :disabled-date="disabledDate"
                            style="margin-right: 10px;"
                            >
                        </el-date-picker>
                        <el-date-picker
                            clearable
                            v-model="orderDate.leavingTime"
                            type="datetime"
                            placeholder="选择结束日期时间"
                            format="YYYY-MM-DD HH:mm"
                            value-format="YYYY-MM-DDTHH:mm:ss"
                            :disabled-date="disabledDate"
                            >
                        </el-date-picker>
                    </div>
                    <div>
                        <el-button style="background-color: brown; color: white; width: 150px;" @click="goSubmit">提交</el-button>
                        <el-button style="background-color: brown; color: white; width: 150px;" @click="goBack">返回</el-button>
                    </div>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
  

<script setup>
import { ref, onBeforeMount } from 'vue';
import request from "@/utils/request";
import { ElMessage } from 'element-plus'; 
import { useRouter } from 'vue-router'
const router = useRouter();
import { useStore } from 'vuex';
// 获取 Vuex store 实例
const store = useStore();
import { computed } from 'vue';

const fileName = ref('');

const roomInfo = ref({
    类型: '',
    价格: '',
    床位数: '',
    可住人数: '',
});

const orderDate = ref({
    bookingTime: '',
    leavingTime: ''
});

const disabledDate = (time) => {
  return time.getTime() < Date.now() - 8.64e7; // 禁用过去的日期
};

const selectedRoomId = computed(() => store.getters.selectedRoomId); // 这是一个ref值 取出id

const getRoomInfo = async() => {
    try {
        const res = await request.get('/room/getRoomInfo', {
            params: {
                id: selectedRoomId.value,
            }
        });
        if(res.code === '0') {
            fileName.value = res.data.roomImage;
            roomInfo.value = {
                类型: res.data.type,
                价格: res.data.price,
                床位数: res.data.bedNum,
                可住人数: res.data.peopleNum,
            };
        }
    } catch(error) {
        ElMessage({
            message: error,
            type: 'error'
        });
    }
};

const getImageUrl = (fileName) => {
    return `http://localhost:8080/api/photo/get?fileName=${fileName}`;
};

onBeforeMount(async() => {
    await getRoomInfo();
});

const goBack = () => {
    router.push('/user/userHome')
};

const goSubmit = async() => {
    try {
        const userData = localStorage.getItem('admin');
        const parseData = JSON.parse(userData); // 转成JSON格式
        const res = await request.post('/reservation/add', {
            uid: parseData.id,
            rid: selectedRoomId.value,
            params: orderDate.value
        });
        if(res.code === '0') {
            ElMessage({
                message: '提交成功',
                type: 'success'
            });
        }
    } catch (error) {
        ElMessage({
            message: error,
            type: 'error'
        });
    }
}

</script>

<style lang="less" scoped>

</style>